<!DOCTYPE html> <!-- 文档类型声明，HTML5标准 -->
<html lang="en"> <!-- HTML文档根元素，语言设置为英语 -->
<head> <!-- 文档头部，包含元数据和样式 -->
    <meta charset="UTF-8"> <!-- 字符编码设置为UTF-8，支持中文等特殊字符 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置，适配移动端 -->
    <title>Document</title> <!-- 页面标题 -->
    <style> <!-- 内部CSS样式 -->
    .box { <!-- 类选择器，选择class为box的元素 -->
        width: 300px; <!-- 设置宽度为300像素 -->
        height: 300px; <!-- 设置高度为300像素 -->
        background-color: pink; <!-- 设置背景颜色为粉色 -->
    }
    </style>
</head>
<body> <!-- 文档主体，包含可见内容 -->
<div class="box"></div> <!-- div容器，应用box样式类 -->

<script src="../js/echarts.min.js"></script> <!-- 引入ECharts图表库 -->

<script> <!-- 内部JavaScript代码 -->
// 初始化ECharts实例：echarts.init(dom容器);
var myChart = echarts.init(document.querySelector('.box'));
// 通过类名选择.box元素作为图表容器，创建ECharts实例

// 指定图表的配置项和数据
var option = { // 图表配置对象
    title: { // 标题配置
        text: 'ECharts 入门示例' // 标题文本内容
    },
    tooltip: {}, // 提示框组件，默认配置
    legend: { // 图例组件
        data: ['销量'] // 图例数据项
    },
    xAxis: { // X轴配置
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X轴类别数据
    },
    yAxis: {}, // Y轴配置，使用默认值
    series: [ // 数据系列配置
        {
            name: '销量', // 系列名称，与图例对应
            type: 'bar', // 图表类型：柱状图
            data: [5, 20, 36, 10, 10, 20] // 系列数据，对应X轴类别
        }
    ]
};

// 使用配置项和数据显示图表
myChart.setOption(option); // 将配置应用到图表实例，渲染图表
</script>
</body>
</html>